<template>
  <div class="chart-panel gradient">
    <div class="chart-panel-title">{{ title }}</div>
    <div class="chart-panel-content">
      <div v-if="leftRight">
        <slot name="left"></slot>
        <div class="chart-panel-split"></div>
        <slot name="right"></slot>
      </div>
      <slot v-else></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "ChartPanel",
  props: {
    title: {
      type: String,
      default: "",
    },
    leftRight: {
      type: Boolean,
      default: false,
    },
  },
};
</script>
<style lang="less">
.chart-panel {
  border: 1px solid #dcdcdc;
  height: 200px;

  color: #01c4f7;
}
.gradient {
  position: relative;
  overflow: hidden;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    // background: linear-gradient(45deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
    background: linear-gradient(to bottom, #01c4f7, lighten(#01c4f7, 30%));
    background-size: 100% 100%;
    // animation: bgposition 8s infinite linear alternate;
    z-index: -1;
    opacity: 0.4;
    transition: 1s linear;
    filter: blur(10px);
  }
}
.gradient:hover {
  &::before {
    transform: translate(0%, -110%);
  }
  //   background: linear-gradient(to bottom, green, purple);
}
</style>
